<!-- 领券中心与新人券中心公用 -->

<template>
  <view class="view">
    <!-- 全平台 -->
    <view class="wrapper">
      <mCoupon :coupon="order.coupon" :user-coupon="order" v-for="(order, index) in orderCouponList" :key="order.id">
        <view class="exchange-btn" :class="{ disabled: order.choose }" @click="handleChooseOrder(index)">
          {{ order.choose ? '已选' : '选择' }}
        </view>
      </mCoupon>

      <!-- 限定品种 -->
      <mCoupon :coupon="kind.coupon" :user-coupon="kind" v-for="(kind, index) in kindCouponList" :key="kind.id">
        <view class="exchange-btn" :class="{ disabled: kind.choose || !kind.canUse }" @click="handleChooseKind(index)">
          {{ kind.canUse ? (kind.choose ? '已选' : '选择') : '不可用' }}
        </view>
      </mCoupon>

      <!-- 底部悬浮 -->

      <view class="bottom-fixed">
        <view class="bottom-content">
          <view class="dont-use" @click="handleSubmit('none')">不使用</view>

          <view class="use" @click="handleSubmit('choose')">使用</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mCoupon from '@/components/mCoupon/index'

export default {
  components: {
    mCoupon
  },

  data() {
    return {
      coupons: [
        {
          id: 1,
          name: '全平台折扣券',
          details: '全平台可用', // 使用限制等
          money: 0,
          coupons: 0.8,
          limitMoney: 0,
          freePostage: false,
          validityPeriod: 1, // 有效期限按天计算
          points: 3000,
          stock: -1,
          category: 'coupons'
        },
        {
          id: 2,
          name: '桂味荔枝代金券',
          details: '限桂味荔枝',
          money: 100,
          coupons: 0,
          limitMoney: 0.01,
          freePostage: false,
          validityPeriod: 1, // 有效期限按天计算
          points: 500,
          stock: 3,
          category: 'cash'
        },
        {
          id: 3,
          name: '怀枝荔枝包邮券',
          details: '限怀枝荔枝',
          money: 0,
          coupons: 0,
          limitMoney: 0,
          freePostage: true,
          validityPeriod: 1, // 有效期限按天计算
          points: 200,
          stock: 10,
          category: 'shipping'
        },
        {
          id: 4,
          name: '黑叶荔枝折扣券',
          details: '限黑叶荔枝',
          money: 0,
          coupons: 0.8,
          limitMoney: 0,
          freePostage: false,
          validityPeriod: 1, // 有效期限按天计算
          points: 400,
          stock: 0,
          category: 'coupons'
        },
        {
          id: 5,
          name: '黑叶荔枝代金券',
          details: '限黑叶荔枝',
          money: 10,
          coupons: 0,
          limitMoney: 100,
          freePostage: false,
          validityPeriod: 1, // 有效期限按天计算
          points: 600,
          stock: 2,
          category: 'cash'
        }
      ],
      orderId: 0,
      userId: 0,
      // 原来已选的
      oIsChoose: [],
      orderCouponList: [],
      kindCouponList: [],
      goodsIdList: []
    }
  },
  onLoad(option) {
    this.orderId = parseInt(option.orderId)
    this.goodsIdList = JSON.parse(option.goodsIdList)
    this.userId = getApp().globalData.userInfo.id
    this.getData()
  },
  methods: {
    async getData() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getOrderCouponAndUserCoupon/' + this.orderId + '/' + this.userId
      })

      console.log(res)
      if (res.status != 200) {
        uni.showToast({
          icon: 'none',
          title: '服务器出错'
        })
        return
      }

      const oc = res.data.oc
      // this.orderCouponList = oc
      const uc = res.data.uc
      // 根据订单号获得的goodsId
      for (let oi = 0; oi < oc.length; oi++) {
        let element = oc[oi]
        element.choose = true
        if (element.coupon.all_goods) {
          this.orderCouponList.push(element)
        } else {
          element.canUse = true
          this.kindCouponList.push(element)
        }
      }

      for (let ui = 0; ui < uc.length; ui++) {
        let element = uc[ui]
        element.choose = false
        if (element.coupon.all_goods) {
          this.orderCouponList.push(element)
        } else {
          // 判断是否可用
          element.canUse = this.checkCouponCanUse(element)
          this.kindCouponList.push(element)
        }
      }
    },
    handleChooseOrder(index) {
      let coupon = this.orderCouponList[index]
      // 判断是否已选
      coupon.choose = !coupon.choose

      if (coupon.choose) {
        // 取消所有订单的
        this.orderCouponList.forEach((element) => {
          if (element.id !== coupon.id) {
            element.choose = false
          }
        })
      }
      this.orderCouponList[index] = coupon
    },
    handleChooseKind(index) {
      let coupon = this.kindCouponList[index]
      // 判断是否已选
      coupon.choose = !coupon.choose

      // 判断是否可用
      if (!coupon.canUse) return

      // 判断是否已选
      if (coupon.choose) {
        // 同一共商品的全部取消选择
        this.kindCouponList.forEach((element) => {
          if (
            element.coupon.goods_of_coupon.goods_id === coupon.coupon.goods_of_coupon.goods_id &&
            element.id !== coupon.id
          ) {
            element.choose = false
          }
        })
        this.kindCouponList[index].choose = true
      }
    },
    checkCouponCanUse(coupon) {
      const cGoodsId = coupon.coupon.goods_of_coupon.goods_id

      for (let i = 0; i < this.goodsIdList.length; i++) {
        const element = this.goodsIdList[i]
        if (cGoodsId === element) {
          return true
        }
      }

      return false
    },

    handleSubmit(flag) {
      if (flag === 'choose') {
        // 使用
        return
      }

      // 不使用
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  padding: 20upx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20upx;
}

.exchange-btn {
  background-color: #ff5722;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100upx;
  height: 70upx;
  font-size: 30upx;
  padding: 0;
  border-radius: 10upx;
  color: #ffffff;

  cursor: pointer;
  transition: all 0.3s;

  &.disabled {
    background-color: #cccccc;
    // cursor: not-allowed;
  }

  &:hover {
    opacity: 0.9;
  }
}

.bottom-fixed {
  width: 100%;
  height: 130upx;

  .bottom-content {
    position: fixed;
    width: 100%;
    height: 130upx;
    z-index: 9999;
    padding: 0 10upx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1upx solid #ebe9e9;
    background-color: #ffffff;

    bottom: 0%;
    left: 0%;

    .use,
    .dont-use {
      margin-right: 40upx;
      color: #ffffff;
      font-size: 35upx;
      padding: 20upx 40upx;
      border-radius: 10upx;
    }

    .dont-use {
      background-color: #cccccc;
    }

    .use {
      background-color: #ff5722;
    }
  }
}
</style>
